import { FC, useState } from 'react';
import useSwr from 'swr';
import MonitorNoData from '@/components/empty/MonitorNoData';
import MinerCountChart from '@/components/charts/MinerCountChart';
import styles from './monitorAnalysis.less';
import { fetchOnlineMiner } from '@/service/onlineMiner';
import moment from 'moment';
import CoinInfoChart from '@/components/charts/CoinInfoChart';
import { fetchAnalysisInfo } from '@/service/analysisInfo';
import InfoCard from '@/components/info-card/InfoCard';
import MinerOnlineChart from '@/components/charts/MinerOnlineChart';

const MonitorAnalysis: FC = () => {
  const [day, setDay] = useState(1);
  const [date, setDate] = useState<moment.Moment | null>(moment());
  const { data: analysisInfo } = useSwr('/info', fetchAnalysisInfo);
  const { data: onlineMinerPageModel } = useSwr(
    ['/monitoronline', date?.format('YYYY-MM-DD'), day],
    (url, date, day) => fetchOnlineMiner(date, day),
  );

  if (!analysisInfo || !analysisInfo.miner.all || analysisInfo.miner.all <= 0) {
    return <MonitorNoData />;
  }

  return (
    <div className={styles.analysis}>
      <InfoCard height={443}>
        <MinerCountChart
          all_count={analysisInfo.miner.all}
          normal_count={analysisInfo.miner[0] || 0}
          warning_count={analysisInfo.miner[1] || 0}
          abnormal_count={analysisInfo.miner[2] || 0}
          downtime_count={analysisInfo.miner[3] || 0}
          offline_count={analysisInfo.miner[4] || 0}
        />
        <div className={styles.dividingLine}></div>
        <MinerOnlineChart
          dataList={onlineMinerPageModel?.originList}
          onChangeDate={setDate}
          onChangeDay={setDay}
          xAxis={onlineMinerPageModel?.xAxis}
        />
      </InfoCard>
      <InfoCard height={440}>
        <CoinInfoChart
          legendData={analysisInfo.legendData}
          seriesData={analysisInfo.seriesData}
        />

        <div className={styles.dividingLine}></div>
      </InfoCard>
    </div>
  );
};
export default MonitorAnalysis;
